<template>
	<view>
		<view class="nav-bar">
			<image src="../../../static/back_icon.png" @tap="back" mode=""></image>
			<view class="center">
				商品详情
			</view>
			<view class="right">
			</view>
		</view>
		<view class="pan">
			<view class="image">
				<image src="../../../static/personal/failure.png" mode=""></image>
			</view>
			<view class="txt">
				该商品已失效
			</view>
		</view>
		<view class="cai">
			<view class="like">
				<image src="../../../static/home/icon-left.png" mode=""></image>
				<text>相似推荐</text>
				<image src="../../../static/home/icon-right.png" mode=""></image>
			</view>
			<view class="list">
				<view class="item-list" v-for="(item,index) in 5" :key="index">
					<view class="img">
						<image src="../../../static/home/poster.png" mode=""></image>
					</view>
					<view class="right">
						<view class="list-name">
							<text>花器客厅电视柜家居装饰摆件花器客厅电视柜家居装饰摆件</text>
						</view>
						<view class="eye">
							<view class="left">
								佣金6%
							</view>
							<view class="right">
								已售1.5万
							</view>
						</view>
						<view class="dis">
							<text class="left">折扣</text>
							¥<text class="center">83.00</text>
							<text class="right">¥149</text>
						</view>
						<view class="bttn" @tap="productDetail">
							<image src="../../../static/home/icon-proed.png" mode=""></image>
							<text class="center">赚</text>
							<text class="right">¥2.13</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			//导航方法
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		height: 128upx;
		padding: 40upx 28upx 0;
		background: #E8271B;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		width: 750upx;
		z-index: 9;

		image {
			width: 48upx;
			height: 48upx;
		}

		.center {
			font-size: 36upx;
			font-weight: 500;
			line-height: 70upx;
			color: rgba(255, 255, 255, 1);
		}

		.right {
			width: 48upx;
			height: 48upx;
		}
	}
	.pan{
		padding-top: 280upx;
		height: 619upx;
		background: #FFFFFF;
		.image{
			width: 86upx;
			height: 86upx;
			margin: 0 auto;
			image{
				display: block;
				width: 86upx;
				height: 86upx;
			}
		}
		.txt{
			text-align: center;
			font-size:28upx;
			font-weight:400;
			line-height:80upx;
			color:rgba(179,179,179,1);
		}
	}
	.cai{
		.like {
			margin: 40upx 0 20upx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 40upx;
			font-size: 28upx;
			font-weight: 500;
			line-height: 34upx;
			color: rgba(77, 77, 77, 1);
			opacity: 1;
		
			text {
				margin: 0 10upx;
			}
		
			image {
				width: 43upx;
				height: 15upx;
			}
		}
		.list{
			background:#F2F2F2;
			padding: 30upx 28upx;
			.item-list{
				padding: 20upx;
				background: #FFFFFF;
				border-radius:20upx;
				height:338upx;
				display: flex;
				margin-bottom: 20upx;
				.img{
					image{
						width: 280upx;
						height: 280upx;
						border-radius:10upx;
						margin-right:20upx;
					}
				}
				.right{
					.list-name{
						margin-top: 10upx;
						font-size:24upx;
						font-weight:500;
						line-height:29upx;
						color:rgba(51,51,51,1);
						image{
							width: 60upx;
							height: 28upx; 
							margin-right:5upx ;
						}
					}
					.eye{
						display: flex;
						justify-content: space-between;
						margin-top: 10upx;
						.left{
							text-align: center;
							width:108upx;
							height:40upx;
							font-size:22upx;
							font-weight:500;
							line-height:40upx;
							color:rgba(230,18,5,1);
							background:rgba(232,39,27,0.2);
							border-radius:10upx;
						}
						.right{
							font-size:22upx;
							font-weight:500;
							line-height:28px;
							color:rgba(153,153,153,1);
						}
					}
					.dis{
						font-size: 22upx;
						color:rgba(232,39,27,1);
						margin-top: 15upx;
						.left{
							color:rgba(153,153,153,1);
							margin-right: 10upx;
						}
						.center{
							font-size:28upx;
							font-weight:bold;
							margin-right: 10upx;
						}
						.right{
							color:rgba(204,204,204,1);
							font-size:20upx;
							text-decoration: line-through;
						}
					}
					.bttn{
						width:228upx;
						height:60upx;
						background:rgba(232,39,27,1);
						border-radius:30upx;
						font-size:22upx;
						color:rgba(255,255,255,1);
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 30upx  0 0 125upx;
						image{
							width: 36upx;
							height: 36upx;
							display:inline-block;
						}
						.center{
							margin: 5upx 10upx 0;
						}
						.right{
							font-weight:bold;
							font-size:32upx;
						}
					}
				}
			}
			
		}
	}
	
	
</style>
